import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader,Switch,Card,Button,Icon,Select } from 'antd'
import city from '../../utils/city'

const FormItem = Form.Item
const InputGroup = Input.Group;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 24,
      offset: 0,
    },
  },
};

const gridStyle = {
  width: '16.6666%',
  textAlign: 'center',
};

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }

      data.contentList = [{type:"BASIC",content:"二是"},{type:"IMAGES",content:"图片"},{type:"MUSIC",content:"音乐"},{type:"NEWS",content:"图文"},{type:"VIDEO",content:"视频"},{type:"VOICE",content:"语音"}]
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="规则名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.name,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="全局置顶" hasFeedback {...formItemLayout}>
        {getFieldDecorator('isTop', {
          initialValue: item.isTop,
          rules: [
            {
              required: true,
              type: 'boolean',
            },
          ],
        })(
        <Radio.Group>
        <Radio value>是</Radio>
        <Radio value={false}>否</Radio>
          </Radio.Group>
        )}
      </FormItem>
      <FormItem label="回复优先级" hasFeedback {...formItemLayout}>
      {getFieldDecorator('displayOrder', {
        initialValue: item.displayOrder,
        rules: [
          {
            required: true,
            type: 'number',
          },
        ],
      })(<InputNumber min={18} max={100} />)}
    </FormItem>
  <FormItem label="触发关键字" hasFeedback {...formItemLayout}>
      {getFieldDecorator('replyType', {
        initialValue: item.replyType,
        rules: [
          {
            required: true,
            type: 'boolean',
          },
        ],
      })(
      <Radio.Group>
      <Radio value>单一</Radio>
      <Radio value={false}>混合</Radio>
        </Radio.Group>
      )}
    </FormItem>
    <FormItem label="" hasFeedback {...tailFormItemLayout}>
      {getFieldDecorator('ruleKeyWords', {
        initialValue: item.ruleKeyWords,
        rules: [
          {
            required: true,
          },
        ],
      })(
      <InputGroup compact>
      <Select style={{ width: '20%' }} defaultValue="Option1">
        <Option value="Option1">精准触发</Option>
        <Option value="Option2">模糊触发</Option>
        </Select>
        <Input  style={{ width: '60%' }} placeholder="多个关键字请使用逗号隔开，如天气，今日天气" defaultValue="" />
        <Button style={{ width: '20%',height:'32px' }} type="primary" ghost><Icon type="smile-o" />表情</Button>
        </InputGroup>
      )}
    </FormItem>
    <FormItem label="是否开启" hasFeedback {...formItemLayout}>
          {getFieldDecorator('isEnable', {
            initialValue: item.isEnable,
            rules: [
              {
                required: true,
              },
            ],
          })(<Switch checkedChildren={'开'} unCheckedChildren={'关'} />)}
        </FormItem>
       <FormItem {...tailFormItemLayout}>
<Card title="群发内容" noHovering bodyStyle={{ padding: 0 }}>
<Card.Grid style={gridStyle}><Icon type="book" />图文</Card.Grid>
    <Card.Grid style={gridStyle}><Icon type="edit" />文字</Card.Grid>
    <Card.Grid style={gridStyle}><Icon type="picture" />图片</Card.Grid>
    <Card.Grid style={gridStyle}><Icon type="customer-service" />音乐</Card.Grid>
    <Card.Grid style={gridStyle}><Icon type="sound"/>语音</Card.Grid>
    <Card.Grid style={gridStyle}><Icon type="video-camera" />视频</Card.Grid>
    </Card>

      </FormItem>
      </Form>


    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
